<template>
  <div class="merchant-settings">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-800">商家设置</h1>
      <p class="text-gray-600 mt-1">管理您的商家配置和偏好设置</p>
    </div>

    <div class="max-w-7xl mx-auto">
      <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <!-- 商家配置 -->
        <div class="p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-6">商家配置</h3>
          
          <div class="space-y-6">
            <!-- 商家信息 -->
            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
              <h4 class="font-medium text-green-900 mb-3">
                <i class="fas fa-store mr-2"></i>商家信息
              </h4>
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span class="text-green-700">商家ID:</span>
                  <span class="ml-2 text-green-900">{{ userStore.userInfo?.id || 'N/A' }}</span>
                </div>
                <div>
                  <span class="text-green-700">注册时间:</span>
                  <span class="ml-2 text-green-900">{{ formatDate(userStore.userInfo?.createTime) }}</span>
                </div>
                <div>
                  <span class="text-green-700">账户状态:</span>
                  <span class="ml-2 text-green-900">
                    <el-tag :type="userStore.userInfo?.status === 1 ? 'success' : 'danger'" size="small">
                      {{ userStore.userInfo?.status === 1 ? '正常' : '禁用' }}
                    </el-tag>
                  </span>
                </div>
                <div>
                  <span class="text-green-700">最后登录:</span>
                  <span class="ml-2 text-green-900">{{ formatDate(userStore.userInfo?.lastLoginTime) }}</span>
                </div>
              </div>
            </div>

            <!-- 业务统计 -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <h4 class="font-medium text-blue-900 mb-3">
                <i class="fas fa-chart-bar mr-2"></i>业务统计
              </h4>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div class="text-center">
                  <div class="text-2xl font-bold text-blue-600">{{ businessStats.totalBooks || 0 }}</div>
                  <div class="text-blue-700">图书总数</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-blue-600">{{ businessStats.totalOrders || 0 }}</div>
                  <div class="text-blue-700">订单总数</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-blue-600">¥{{ formatCurrency(businessStats.totalSales) }}</div>
                  <div class="text-blue-700">总销售额</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-blue-600">{{ businessStats.totalCustomers || 0 }}</div>
                  <div class="text-blue-700">客户总数</div>
                </div>
              </div>
            </div>

            

            <!-- 数据管理 -->
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
              <h4 class="font-medium text-yellow-900 mb-4">
                <i class="fas fa-database mr-2"></i>数据管理
              </h4>
              
              <div class="space-y-3">
                <div class="flex items-center justify-between">
                  <div>
                    <div class="font-medium text-yellow-900">导出图书数据</div>
                    <div class="text-sm text-yellow-700">导出所有图书信息到Excel文件</div>
                  </div>
                  <el-button size="small" @click="exportBooks" :loading="exportLoading.books">
                    <i class="fas fa-download mr-1"></i>导出
                  </el-button>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <div class="font-medium text-yellow-900">导出订单数据</div>
                    <div class="text-sm text-yellow-700">导出所有订单信息到Excel文件</div>
                  </div>
                  <el-button size="small" @click="exportOrders" :loading="exportLoading.orders">
                    <i class="fas fa-download mr-1"></i>导出
                  </el-button>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <div class="font-medium text-yellow-900">清理缓存</div>
                    <div class="text-sm text-yellow-700">清理系统缓存以提高性能</div>
                  </div>
                  <el-button size="small" @click="clearCache" :loading="clearCacheLoading">
                    <i class="fas fa-broom mr-1"></i>清理
                  </el-button>
                </div>
              </div>
            </div>

             <!-- 关于系统 -->
             <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                <h4 class="font-medium text-purple-900 mb-3">
                  <i class="fas fa-info-circle mr-2"></i>关于系统
                </h4>
                <div class="text-center">
                  <div class="mb-4">
                    <i class="fas fa-book text-4xl text-purple-600 mb-3"></i>
                    <h5 class="text-lg font-bold text-purple-800">书香阁管理系统</h5>
                    <p class="text-purple-600 text-sm mt-1">专业的在线书店管理平台</p>
                  </div>

                  <div class="bg-white rounded-lg p-4 text-left">
                    <div class="grid grid-cols-2 gap-3 mb-4 text-sm">
                      <div>
                        <span class="text-purple-700 font-medium">版本号:</span>
                        <span class="ml-2 text-purple-900">v1.0.0</span>
                      </div>
                      <div>
                        <span class="text-purple-700 font-medium">发布日期:</span>
                        <span class="ml-2 text-purple-900">2025-07-24</span>
                      </div>
                      <div>
                        <span class="text-purple-700 font-medium">技术栈:</span>
                        <span class="ml-2 text-purple-900">Spring Boot + Vue 3 + Element Plus + MySQL</span>
                      </div>
                      <div>
                        <span class="text-purple-700 font-medium">开发作者:</span>
                        <span class="ml-2 text-purple-900">程序员_Ti</span>
                      </div>
                    </div>

                    <div class="border-t border-purple-100 pt-3">
                      <h6 class="font-medium text-purple-900 mb-2 text-sm">核心功能</h6>
                      <div class="grid grid-cols-2 gap-1 text-xs text-purple-700">
                        <div>• 用户管理系统</div>
                        <div>• 图书信息管理</div>
                        <div>• 订单处理跟踪</div>
                        <div>• 数据统计分析</div>
                        <div>• 系统监控面板</div>
                        <div>• 权限控制管理</div>
                      </div>
                    </div>

                    <div class="border-t border-purple-100 pt-3 mt-3">
                      <div class="flex justify-between items-center text-xs text-purple-600">
                        <span>© 2025 程序员_Ti</span>
                        <span>All Rights Reserved</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
          </div>
        </div>
      </div>
    </div>

    <!-- 登录日志对话框 -->
    <el-dialog v-model="showLoginLogDialog" title="登录日志" width="600px">
      <el-table :data="loginLogs" style="width: 100%">
        <el-table-column prop="loginTime" label="登录时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.loginTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" width="120" />
        <el-table-column prop="location" label="登录地点" />
        <el-table-column prop="device" label="设备信息" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { merchantAPI } from '@/api/merchant.js'

const userStore = useUserStore()

// 响应式数据
const showLoginLogDialog = ref(false)
const exportLoading = reactive({
  books: false,
  orders: false
})
const clearCacheLoading = ref(false)

// 业务统计数据
const businessStats = ref({
  totalBooks: 0,
  totalOrders: 0,
  totalSales: 0,
  totalCustomers: 0
})

// 系统设置
const settings = reactive({
  emailNotification: true,
  smsNotification: false,
  autoConfirmOrder: false,
  stockAlert: true
})

// 登录日志
const loginLogs = ref([
  {
    loginTime: new Date(),
    ip: '192.168.1.100',
    location: '北京市',
    device: 'Chrome 91.0 / Windows 10'
  }
])

// 格式化日期
const formatDate = (date) => {
  if (!date) return '暂无'
  return new Date(date).toLocaleString('zh-CN')
}

// 格式化货币
const formatCurrency = (amount) => {
  if (!amount) return '0.00'
  return Number(amount).toFixed(2)
}

// 更新设置
const updateSettings = async () => {
  try {
    // 这里调用API更新设置
    // await merchantAPI.updateSettings(settings)
    ElMessage.success('设置已保存')
  } catch (error) {
    console.error('保存设置失败:', error)
    ElMessage.error('保存设置失败')
  }
}

// 导出图书数据
const exportBooks = async () => {
  try {
    exportLoading.books = true
    // 这里调用API导出图书数据
    // const response = await merchantAPI.exportBooks()
    ElMessage.success('图书数据导出成功')
  } catch (error) {
    console.error('导出图书数据失败:', error)
    ElMessage.error('导出图书数据失败')
  } finally {
    exportLoading.books = false
  }
}

// 导出订单数据
const exportOrders = async () => {
  try {
    exportLoading.orders = true
    // 这里调用API导出订单数据
    // const response = await merchantAPI.exportOrders()
    ElMessage.success('订单数据导出成功')
  } catch (error) {
    console.error('导出订单数据失败:', error)
    ElMessage.error('导出订单数据失败')
  } finally {
    exportLoading.orders = false
  }
}

// 清理缓存
const clearCache = async () => {
  try {
    await ElMessageBox.confirm('确定要清理系统缓存吗？', '确认操作', {
      type: 'warning'
    })
    
    clearCacheLoading.value = true
    // 这里调用API清理缓存
    // await merchantAPI.clearCache()
    ElMessage.success('缓存清理成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清理缓存失败:', error)
      ElMessage.error('清理缓存失败')
    }
  } finally {
    clearCacheLoading.value = false
  }
}

// 显示登录日志
const showLoginLogs = () => {
  showLoginLogDialog.value = true
  // 这里可以调用API获取登录日志
  // loadLoginLogs()
}

// 加载业务统计数据
const loadBusinessStats = async () => {
  try {
    const response = await merchantAPI.getBusinessStats()
    if (response.code === 200) {
      businessStats.value = response.data
    } else {
      console.error('加载业务统计失败:', response.message)
    }
  } catch (error) {
    console.error('加载业务统计失败:', error)
  }
}

onMounted(() => {
  loadBusinessStats()
})
</script>

<style scoped>
.merchant-settings {
  min-height: 100vh;
}
</style>
